<template>
  <div class="add-notice">
    <el-form
      ref="addNoticeForm"
      :model="addNoticeForm"
      :rules="rules"
      size="small"
      label-width="100px"
      class="add-notice-form"
    >
      <el-form-item :label="$t('notice.title')" prop="title">
        <el-input
          v-model="addNoticeForm.title"
          :placeholder="$t('notice.inputTitle')"
          @blur="trim('title')"
          @mouseout.native="blurRule($event)"
        />
      </el-form-item>
      <el-form-item :label="$t('notice.range')" prop="userNames">
        <el-input
          v-model="addNoticeForm.userNames"
          class="release-range"
          :placeholder="$t('notice.selectRange')"
          readonly
          @focus="showSelectUsers = true"
          @blur="trim('userNames')"
          @mouseout.native="blurRule($event)"
        />
      </el-form-item>
      <el-form-item :label="$t('notice.content')" prop="content">
        <div class="add-notice-content">
          <el-input
            v-model="addNoticeForm.content"
            type="textarea"
            :rows="3"
            :placeholder="$t('notice.inputContent')"
            :maxlength="addNoticeForm.conentMaxLen"
            @blur="trim('content')"
            @mouseout.native="blurRule($event)"
          />
          <div class="content-nums">
            {{
              addNoticeForm.content.length ? addNoticeForm.content.length : 0
            }}/{{ addNoticeForm.conentMaxLen }}
          </div>
        </div>
      </el-form-item>
      <el-form-item
        v-if="type === '1'"
        :label="$t('notice.leftButton')"
        prop="okBtn"
      >
        <el-input
          v-model="addNoticeForm.okBtn"
          type="text"
          :placeholder="$t('notice.leftButtonTip')"
          @blur="trim('okBtn')"
          @mouseout.native="blurRule($event)"
        />
      </el-form-item>
      <el-form-item
        v-if="type === '1'"
        :label="$t('notice.rightButton')"
        prop="cancelBtn"
      >
        <el-input
          v-model="addNoticeForm.cancelBtn"
          type="text"
          :placeholder="$t('notice.rightButtonTip')"
          @blur="trim('cancelBtn')"
          @mouseout.native="blurRule($event)"
        />
      </el-form-item>
      <el-form-item class="add-notice-operate">
        <el-button type="info" @click="cancelForm('addNoticeForm')">{{
          $t('notice.cancel')
        }}</el-button>
        <el-button type="primary" @click="submitForm('addNoticeForm')">{{
          $t('notice.ok')
        }}</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      :title="$t('notice.selectPeople')"
      :visible.sync="showSelectUsers"
      width="700px"
      append-to-body
    >
      <employee-choose
        :default-selected="releaseRangeIds"
        @confirm="confirmSelectPeople"
        @cancel="cancelSelectPeople"
      />
    </el-dialog>
  </div>
</template>
<script>
import employeeChoose from './employee-choose';
import notices from '@/api/notices';
import { trim } from '@/utils/';

export default {
  components: { employeeChoose },
  props: {
    type: {
      type: String,
      require: true,
      default: '0',
    },
  },
  data() {
    return {
      showSelectUsers: false,
      addNoticeForm: {
        conentMaxLen: 1024,
        originEventId: '',
        title: '',
        content: '',
        users: [],
        userNames: '',
        groups: [],
        organizations: {
          checkedOrgs: [],
          uncheckedOrgs: [],
          checkedUsers: [],
          uncheckedUsers: [],
        },
        attachments: [],
        images: [],
        okBtn: '',
        cancelBtn: '',
        leftButton: null,
        rightButton: null,
      },
      rules: {
        title: [
          {
            required: true,
            message: this.$t('notice.inputTitle'),
            trigger: 'blur',
          },
          {
            max: 128,
            message: this.$t('notice.inputTitleLen'),
            trigger: 'blur',
          },
        ],
        userNames: [
          {
            required: true,
            message: this.$t('notice.selectRange'),
            trigger: 'change',
          },
        ],
        content: [
          {
            required: true,
            message: this.$t('notice.inputContent'),
            trigger: 'blur',
          },
          {
            max: 1024,
            message: this.$t('notice.inputContentLen'),
            trigger: 'blur',
          },
        ],
        okBtn: [
          {
            required: true,
            message: this.$t('notice.leftButtonTip'),
            trigger: 'blur',
          },
          {
            max: 128,
            message: this.$t('notice.inputTitleLen'),
            trigger: 'blur',
          },
        ],
        cancelBtn: [
          {
            required: true,
            message: this.$t('notice.rightButtonTip'),
            trigger: 'blur',
          },
          {
            max: 128,
            message: this.$t('notice.inputTitleLen'),
            trigger: 'blur',
          },
        ],
      },
    };
  },
  computed: {
    releaseRangeIds() {
      const ids = [];
      if (this.addNoticeForm.users) {
        this.addNoticeForm.users.forEach(item => {
          ids.push(item.sourceId);
        });
      }
      return ids;
    },
  },
  methods: {
    /**
     * 验证表单有效性
     * @param {String} formName 表单ref名
     * */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addNoticeHttp();
        } else {
          return false;
        }
      });
    },
    /**
     * 添加消息请求
     * */
    async addNoticeHttp() {
      const params = {
        title: this.addNoticeForm.title,
        content: this.addNoticeForm.content,
        users: this.addNoticeForm.users,
        type: Number(this.type),
        leftButtonName: this.leftButton,
        rightButtonName: this.rightButton,
      };
      const result = await notices.editMessage(params);
      if (result.status === 200) {
        this.$message({
          type: 'success',
          message: this.$t('notice.sendSuccess'),
        });
        this.cancelForm('addNoticeForm');
        this.$emit('closeAddNoticeDialog');
        this.$emit('getNotices');
      }
    },
    /**
     * 发布范围-弹窗显示-取消弹窗
     */
    cancelForm(formName) {
      this.$refs[formName].resetFields();
      this.showSelectUsers = false;
      this.addNoticeForm.users = [];
      this.addNoticeForm.userNames = '';
      this.$emit('closeAddNoticeDialog');
    },
    /**
     * 发布范围-弹窗显示
     */
    toShowSelectUsers() {
      this.showSelectUsers = true;
    },
    /**
     * 获得用户名称
     * @param {Array} users 用户信息数据
     */
    getUserNames(users) {
      const names = [];
      users.forEach(item => {
        names.push(item.name);
      });
      return names.length === 0 ? '' : names.join(',');
    },
    /**
     * 发布范围-确定选择人员
     * @param {Array} users 已选人员数据
     */
    confirmSelectPeople(users) {
      this.showSelectUsers = false;
      if (users) {
        this.addNoticeForm.users = users;
        this.addNoticeForm.userNames = this.getUserNames(users);
      }
    },
    /**
     * 发布范围-取消选择人员
     */
    cancelSelectPeople() {
      this.showSelectUsers = false;
    },
    /**
     * 去除两端空格处理
     * @param {String} name 输入框名称
     */
    trim(name) {
      this.addNoticeForm[name] = trim(this.addNoticeForm[name]);
    },
    /**
     * 失去焦点
     * @param {DOMEvent} event 当前输入框
     */
    blurRule(event) {
      // 输入框失去焦点操作
      event.target.blur();
    },
  },
};
</script>
<style scoped lang="scss">
.add-notice {
  margin-top: -20px;
  .add-notice-form {
    >>> .el-form-item__label {
      font-weight: normal;
    }
  }
  .add-notice-content {
    position: relative;
    .content-nums {
      position: absolute;
      background: #ffffff;
      height: 20px;
      right: 7px;
      bottom: 8px;
    }
  }
  .add-notice-operate {
    text-align: right;
  }
}
</style>
